<template>
    <a-carousel arrows autoplay>
        <div
                slot="prevArrow"

                class="custom-slick-arrow"
                style="left: 10px;zIndex: 1"
        >
            <a-icon type="left-circle" style="font-size: 30px;"/>
        </div>
        <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
            <a-icon type="right-circle" style="font-size: 30px;"/>
        </div>
        <div v-for="(item,index) in list" :key="index" :style="{'background-image':'url('+item.imgUrlPc+')','background-size':'cover',height:'400px','background-repeat':'no-repeat',width:'100%','background-position':'50%'}">
        </div>
    </a-carousel>
</template>

<script>
    import {shufflingFigure} from "../api/api";

    export default {
        name: "ShufflingFigure.vue",
        data() {
            return {
                list: []
            }
        },
        created() {
            shufflingFigure(5).then(res => {
                // console.log(res)
                this.list = res.data

            });
        }
    }
</script>

<style scoped>
    /* For demo */
    .ant-carousel >>> .slick-slide {
        text-align: center;
        height: 400px;
        line-height: 160px;
        background: #364d79;
        overflow: hidden;

    }

    .ant-carousel >>> .custom-slick-arrow {
        width: 25px;
        height: 25px;
        font-size: 25px;
        color: #fff;
        background-color: rgba(31, 45, 61, 0.11);
        opacity: 0.3;
    }

    .ant-carousel >>> .custom-slick-arrow:before {
        display: none;

    }

    .ant-carousel >>> .custom-slick-arrow:hover {
        opacity: 0.5;
    }

    .ant-carousel >>> .slick-slide h3 {
        color: #fff;
    }

    img {
        width: 100%;
        height: 400px;
    }
</style>